#root{
  padding-top: 0;
}
.music{
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* backdrop-filter: blur(3px); */
  background-image: url(../../assets/car.jpg);
  background-size: 100%;
  background-position: right bottom;
  background-blend-mode:multiply;
  animation: bgmove 20s linear infinite alternate-reverse;
}
.headtitle{
  transform-style: preserve-3d;
  perspective: 1000px;
}
.musicplayer{
  margin-top: 40%;
  position: relative;
  z-index: 3;
}
.title{
  /* font-size: 20px; */
  position: relative;
  z-index: 3;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: transparent;
  background: linear-gradient(to left, rgb(202, 224, 34), rgb(32, 167, 149),rgb(190, 53, 240,0.8));
  -webkit-background-clip: text;
  /* background-position: 150px 0; */
  transition: .3s;
  animation: move 10s ease-in-out infinite alternate-reverse;
  /* margin-bottom: 40%; */
}

.title:hover{
  transform: translateZ(100px);
}
.audio{
  width: 80%;
}
.musiclist{
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 10;
  padding: 0px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .5s, border-radius .7s, background-color .7s;
  animation: show 10s 10s;
  /* animation-fill-mode: forwards; */
  backdrop-filter: blur(5px);
  box-shadow: 
  0 0 8px rgba(251, 242, 254, 0.747),
  0 0 3px rgba(251, 242, 254, 0.877),
  0 0 1px #fff,
  0 0 10px rgb(5, 5, 5),
  inset 0 0 1px rgb(255, 255, 255);
  text-shadow: 1px 1px 3px black;
  overflow-y: auto;
  height: 30vh;
  max-width: 90vw;
}

.musiclist li{
  border-radius: 5px;
  padding: 0 5px;
  cursor: pointer;
  transition: color .1s, background-color .5s;
}
.musiclist li:not(:first-child){
  margin-bottom: 5px;
}
.musiclist li.active{
  color: rgb(59, 248, 59);
  background-color: rgba(86, 86, 86, 0.205);
}
.musiclist:hover{
  opacity: 1;
  border-radius: 10px;
  background-color: rgba(237, 221, 152, 0.197);
}

@keyframes move {
  from{
    transform: translateX(-350px);
    background-position: 350px 0;
  }
  to{
    transform: translateX(350px);
    background-position: -350px 0;
  }
}

@keyframes bgmove {
  0%{
    background-color: rgb(255, 255, 255);
  }
  25%{
    background-color: rgb(183, 162, 105);
  }
  50%{
    background-color: rgb(168, 242, 194);
  }
  75%{
    background-color: rgb(162, 206, 250);
  }
  100%{
    background-color: rgb(251, 140, 221);
  }
}

@keyframes show {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}